<!-- src/components/Cards/EditACard.vue -->
<template>
  <!-- 遮罩层 -->
  <div class="edit-card-overlay" @click="handleOverlayClick">
    <div class="edit-card" @click.stop>
      <!-- 顶部按钮栏 -->
      <div class="edit-card-header">
        <div class="header-left">
          <el-button 
            class="header-button delete-button" 
            @click="handleDelete" 
            type="danger" 
            text
            title="删除"
          >
            <el-icon><Delete /></el-icon>
            <span class="button-text">删除</span>
          </el-button>
        </div>
        <div class="header-right">
          <el-button 
            class="header-button close-button" 
            @click="handleClose" 
            text 
            title="关闭"
          >
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </div>
      
      <!-- 内容区域 -->
      <div class="edit-card-content">
        <!-- 标题输入框 -->
        <div class="edit-row">
          <div class="row-icon">
            <el-icon><Edit /></el-icon>
          </div>
          <el-input
            v-model="editData.title"
            type="text"
            placeholder="输入标题"
            class="title-input"
            size="large"
          />
        </div>

        <!-- 日期范围栏 -->
        <div class="edit-row date-range-row">
          <div class="row-icon">
            <el-icon><Calendar /></el-icon>
          </div>
          <div class="date-range-content">
            <!-- 显示状态内容 -->
            <div v-if="!isEditingDateRange" class="display-content">
              <div class="date-range-text">{{ formatDateRangeDisplay() }}</div>
              <el-button 
                class="edit-date-button" 
                @click.stop="enterEditMode" 
                text
                title="修改日期"
              >
                <el-icon><Setting /></el-icon>
              </el-button>
            </div>
            
            <!-- 编辑状态内容 -->
            <div v-else class="edit-content">
              <!-- 第一行：起始日期和终止日期 -->
              <div class="date-inputs-row">
                <div class="date-input-group">
                  <label class="date-label">起始日期</label>
                  <div class="date-value fixed-date">
                    {{ formatActivityDate(editData.startDate) }}
                  </div>
                </div>
                <div class="date-input-group">
                  <label class="date-label">终止日期</label>
                  <div 
                    class="date-value editable-date" 
                    @click="isAllDay && showEndDatePicker()"
                    :class="{ 'all-day-mode': isAllDay, 'time-mode': !isAllDay }"
                  >
                    <span v-if="isAllDay">{{ formatActivityDate(editData.endDate) }}</span>
                    <span v-else>{{ activityStartTime }} ~ {{ activityEndTime }}</span>
                  </div>
                  <!-- 终止时间 DatePicker -->
                  <div class="date-picker-container" v-if="showEndDatePickerFlag">
                    <DatePicker
                      :visible="showEndDatePickerFlag"
                      :initial-date="editData.endDate"
                      @select="handleEndDateSelect"
                      @close="hideEndDatePicker"
                    />
                  </div>
                </div>
              </div>
              
              <!-- 第二行：全天复选框 -->
              <div class="all-day-row">
                <div class="all-day-checkbox">
                  <el-checkbox 
                    v-model="isAllDay"
                    @change="handleAllDayChange"
                  >
                    全天
                  </el-checkbox>
                </div>
              </div>

              <!-- 第三行：时间选择区域（非全天时显示） -->
              <div v-if="!isAllDay" class="time-inputs-row">
                <div class="time-input-group">
                  <label>开始时刻</label>
                  <div class="time-input-wrapper">
                    <el-input
                      v-model="activityStartTime"
                      type="text"
                      placeholder="HH:mm"
                      class="time-input"
                      @blur="validateStartTime"
                      @focus="showStartTimeDropdown = true"
                      @click.stop
                    />
                    <select 
                      v-model="activityStartTime" 
                      class="time-dropdown"
                      v-if="showStartTimeDropdown"
                      @blur="showStartTimeDropdown = false"
                      @change="handleStartTimeChange"
                      @click.stop
                    >
                      <option 
                        v-for="time in timeOptions" 
                        :key="'start-' + time"
                        :value="time"
                      >
                        {{ time }}
                      </option>
                    </select>
                  </div>
                </div>
                <div class="time-input-group">
                  <label>结束时刻</label>
                  <div class="time-input-wrapper">
                    <el-input
                      v-model="activityEndTime"
                      type="text"
                      placeholder="HH:mm"
                      class="time-input"
                      @blur="validateEndTime"
                      @focus="showEndTimeDropdown = true"
                      @click.stop
                    />
                    <select 
                      v-model="activityEndTime" 
                      class="time-dropdown"
                      v-if="showEndTimeDropdown"
                      @blur="showEndTimeDropdown = false"
                      @change="handleEndTimeChange"
                      @click.stop
                    >
                      <option 
                        v-for="time in timeOptions" 
                        :key="'end-' + time"
                        :value="time"
                      >
                        {{ time }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="date-range-actions">
                <el-button type="primary" class="confirm-btn" @click="confirmDateRange">确定</el-button>
                <el-button class="cancel-btn" @click="cancelDateRange">取消</el-button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 地点设置 -->
        <div class="edit-row">
          <div class="row-icon">
            <el-icon><Location /></el-icon>
          </div>
          <el-input
            v-model="editData.location"
            type="text"
            placeholder="添加地点"
            class="location-input"
          />
        </div>
        
        <!-- 备注 -->
        <div class="edit-row">
          <div class="row-icon">
            <el-icon><Document /></el-icon>
          </div>
          <el-input
            v-model="editData.remark"
            type="text"
            placeholder="添加备注"
            class="note-input"
          />
        </div>

        <!-- 是否重复 -->
        <div class="edit-row">
          <div class="row-icon">
            <el-icon><Refresh /></el-icon>
          </div>
          <div class="repeat-section">
            <div class="repeat-checkbox">
              <el-checkbox v-model="editData.repeat">
                重复活动
              </el-checkbox>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="edit-card-footer">
        <div class="footer-right">
          <el-button class="cancel-button" @click="handleClose">
            取消
          </el-button>
          <el-button type="primary" class="save-button" @click="handleSave">
            保存
          </el-button>
        </div>
      </div>
    </div>
  </div>

  <!-- Element Plus 对话框 -->
  <el-dialog
    v-model="deleteDialogVisible"
    title="确认删除"
    width="400px"
    align-center
  >
    <span>确定要删除这个活动吗？此操作不可撤销。</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定删除</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Delete,
  Close,
  Edit,
  Calendar,
  Location,
  Document,
  Refresh,
  Setting
} from '@element-plus/icons-vue'
import DatePicker from '@/components/Calendar/DatePicker.vue'
import type { activityCard } from '@/types/card'
import { activityCardApi } from '@/api/card'
import { useCardStore } from '@/store/card'

// 所有现有的 JavaScript/TypeScript 代码保持不变...
// [保留所有现有的 props、emits、ref、reactive、computed、methods 等]

interface Props {
  cardData: activityCard
}

interface Emits {
  (e: 'close'): void
  (e: 'update:cardData', card: activityCard): void
  (e: 'delete', id: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const cardStore = useCardStore()

// 编辑数据
const editData = reactive<activityCard>({
  ...props.cardData
})

// 日期范围编辑状态
const isEditingDateRange = ref(false)
const showEndDatePickerFlag = ref(false)
const isAllDay = ref(props.cardData.allDayLong)

// 时间相关状态
const activityStartTime = ref('00:00')
const activityEndTime = ref('23:45')
const showStartTimeDropdown = ref(false)
const showEndTimeDropdown = ref(false)

// 编辑前的值，用于取消时恢复
const beforeEditStartTime = ref('')
const beforeEditEndTime = ref('')

// 删除对话框状态
const deleteDialogVisible = ref(false)

// 生成时间选项（15分钟间隔，00:00 到 23:45）
const timeOptions = computed(() => {
  const options = []
  for (let hour = 0; hour < 24; hour++) {
    for (let minute = 0; minute < 60; minute += 15) {
      const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
      options.push(timeString)
    }
  }
  return options
})

// 初始化时间数据
const initializeTimeData = () => {
  if (!editData.allDayLong && editData.beginTime && editData.endTime) {
    const startDate = new Date(editData.beginTime)
    const endDate = new Date(editData.endTime)
    activityStartTime.value = `${startDate.getHours().toString().padStart(2, '0')}:${startDate.getMinutes().toString().padStart(2, '0')}`
    activityEndTime.value = `${endDate.getHours().toString().padStart(2, '0')}:${endDate.getMinutes().toString().padStart(2, '0')}`
  } else {
    // 全天模式，使用默认时间
    activityStartTime.value = '00:00'
    activityEndTime.value = '23:45'
  }
  
  // 保存编辑前的值
  beforeEditStartTime.value = activityStartTime.value
  beforeEditEndTime.value = activityEndTime.value
}

// 进入编辑模式
const enterEditMode = () => {
  // 保存编辑前的值，用于取消时恢复
  beforeEditStartTime.value = activityStartTime.value
  beforeEditEndTime.value = activityEndTime.value

  // 确保在非全天模式下，终止日期与起始日期相同
  if (!isAllDay.value) {
    editData.endDate = new Date(editData.startDate)
  }
  
  isEditingDateRange.value = true
}

// 确认日期范围
const confirmDateRange = () => {
  // 验证逻辑
  if (isAllDay.value) {
    // 全天模式：终止日期至少为起始日期
    if (editData.endDate < editData.startDate) {
      ElMessage.warning('终止日期必须晚于起始日期')
      return
    }
  } else {
    // 非全天模式：起始日期和终止日期必须为同一天
    if (editData.endDate.toDateString() !== editData.startDate.toDateString()) {
      ElMessage.warning('非全天模式下，起始日期和终止日期必须为同一天')
      return
    }
    // 验证时间格式和顺序
    if (!validateTimeFormat(activityStartTime.value) || !validateTimeFormat(activityEndTime.value)) {
      ElMessage.warning('时间格式不正确，请使用 HH:mm 格式')
      return
    }
    if (!validateTimeOrder(activityStartTime.value, activityEndTime.value)) {
      ElMessage.warning('结束时间必须晚于开始时间')
      return
    }
    
    // 设置开始时间和结束时间
    editData.beginTime = combineDateAndTime(editData.startDate, activityStartTime.value)
    editData.endTime = combineDateAndTime(editData.endDate, activityEndTime.value)
  }
  
  // 更新全天状态
  editData.allDayLong = isAllDay.value
  
  isEditingDateRange.value = false
  // 更新编辑前的值，为下次编辑做准备
  beforeEditStartTime.value = activityStartTime.value
  beforeEditEndTime.value = activityEndTime.value
}

// 取消日期范围编辑
const cancelDateRange = () => {
  isEditingDateRange.value = false
  // 重置为编辑前的值（进入编辑模式时保存的值）
  activityStartTime.value = beforeEditStartTime.value
  activityEndTime.value = beforeEditEndTime.value
  // 如果是非全天模式，确保结束日期与开始日期相同
  if (!isAllDay.value) {
    editData.endDate = new Date(editData.startDate)
  }
}

// 处理全天状态变化
const handleAllDayChange = () => {
  if (isAllDay.value) {
    // 切换到全天模式：重置时间为默认值，确保终止日期至少为起始日期
    activityStartTime.value = '00:00'
    activityEndTime.value = '23:45'
    if (editData.endDate <= editData.startDate) {
      const newEndDate = new Date(editData.startDate)
      newEndDate.setDate(newEndDate.getDate() + 1)
      editData.endDate = newEndDate
    }
  } else {
    // 切换到非全天模式：确保起始日期和终止日期为同一天
    editData.endDate = new Date(editData.startDate)
  }
}

// 组合日期和时间
const combineDateAndTime = (date: Date, timeStr: string): Date => {
  const [hours, minutes] = timeStr.split(':').map(Number)
  const newDate = new Date(date)
  newDate.setHours(hours, minutes, 0, 0)
  return newDate
}

// 验证时间格式 (HH:mm)
const validateTimeFormat = (timeStr: string): boolean => {
  const timeRegex = /^([01]?[0-9]|2[0-3]):([0-5][0-9])$/
  return timeRegex.test(timeStr)
}

// 验证时间顺序
const validateTimeOrder = (startTime: string, endTime: string): boolean => {
  const [startHours, startMinutes] = startTime.split(':').map(Number)
  const [endHours, endMinutes] = endTime.split(':').map(Number)
  
  if (endHours < startHours) return false
  if (endHours === startHours && endMinutes <= startMinutes) return false
  return true
}

// 验证开始时间
const validateStartTime = () => {
  if (!validateTimeFormat(activityStartTime.value)) {
    ElMessage.warning('时间格式不正确，请使用 HH:mm 格式（如 09:00）')
    activityStartTime.value = '00:00'
  }
}

// 验证结束时间
const validateEndTime = () => {
  if (!validateTimeFormat(activityEndTime.value)) {
    ElMessage.warning('时间格式不正确，请使用 HH:mm 格式（如 18:00）')
    activityEndTime.value = '23:45'
    return
  }
  
  if (!validateTimeOrder(activityStartTime.value, activityEndTime.value)) {
    ElMessage.warning('结束时间不能早于开始时间')
    activityEndTime.value = '23:45'
  }
}

// 处理开始时间变化
const handleStartTimeChange = () => {
  showStartTimeDropdown.value = false
  // 自动调整结束时间，确保结束时间晚于开始时间
  if (!validateTimeOrder(activityStartTime.value, activityEndTime.value)) {
    // 如果结束时间早于开始时间，自动设置为开始时间+1小时
    const [hours, minutes] = activityStartTime.value.split(':').map(Number)
    let newHours = hours + 1
    if (newHours >= 24) newHours = 23
    activityEndTime.value = `${newHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
  }
}

// 处理结束时间变化
const handleEndTimeChange = () => {
  showEndTimeDropdown.value = false
  // 验证结束时间不早于开始时间
  if (!validateTimeOrder(activityStartTime.value, activityEndTime.value)) {
    ElMessage.warning('结束时间不能早于开始时间')
    activityEndTime.value = '23:45'
  }
}

// 格式化日期范围显示
const formatDateRangeDisplay = () => {
  const startStr = formatActivityDate(editData.startDate)
  const endStr = formatActivityDate(editData.endDate)
  
  if (editData.allDayLong) {
    return `${startStr} ~ ${endStr}`
  } else {
    const startTime = editData.beginTime ? formatTimeOnly(editData.beginTime) : activityStartTime.value
    const endTime = editData.endTime ? formatTimeOnly(editData.endTime) : activityEndTime.value
    return `${startStr} ${startTime} - ${endTime}`
  }
}

// 格式化活动日期
const formatActivityDate = (date: Date) => {
  const month = date.getMonth() + 1
  const day = date.getDate()
  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
  const weekDay = weekDays[date.getDay()]
  return `${month}月${day}日 周${weekDay}`
}

// 格式化时间显示（仅时间）
const formatTimeOnly = (date: Date): string => {
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

// DatePicker 相关方法
const showEndDatePicker = () => {
  if (isEditingDateRange.value) {
    showEndDatePickerFlag.value = true
  }
}

const hideEndDatePicker = () => {
  showEndDatePickerFlag.value = false
}

const handleEndDateSelect = (date: Date) => {
  if (isAllDay.value) {
    // 全天模式：不能比起始日期早
    if (date < editData.startDate) {
      ElMessage.warning('终止日期不能比起始日期早')
      return
    }
  } else {
    // 非全天模式：必须与起始日期同一天
    if (date.toDateString() !== editData.startDate.toDateString()) {
      ElMessage.warning('非全天模式下，终止日期必须与起始日期相同')
      return
    }
  }
  editData.endDate = new Date(date.getTime())
}

// 处理保存
const handleSave = async () => {
  try {
    // 如果当前在编辑模式下，先退出编辑模式
    if (isEditingDateRange.value) {
      isEditingDateRange.value = false
    }

    // 更新卡片数据
    const updatedCard = await activityCardApi.update(editData.id, {
      ...editData,
      updatedAt: new Date()
    })

    if (updatedCard) {
      ElMessage.success('活动更新成功')
      emit('update:cardData', updatedCard)
      emit('close')
    }
  } catch (error) {
    console.error('更新活动失败:', error)
    ElMessage.error('更新活动失败')
  }
}

// 处理删除
const handleDelete = () => {
  deleteDialogVisible.value = true
}

// 确认删除
const confirmDelete = async () => {
  emit('delete', editData.id)
  deleteDialogVisible.value = false
}

// 处理关闭
const handleClose = () => {
  emit('close')
}

// 处理遮罩层点击
const handleOverlayClick = (event: MouseEvent) => {
  // 确保点击的是遮罩层本身，而不是子元素
  if ((event.target as HTMLElement).classList.contains('edit-card-overlay')) {
    handleClose()
  }
}

// 初始化
onMounted(() => {
  initializeTimeData()
})

// 阻止背景滚动
onMounted(() => {
  document.body.style.overflow = 'hidden'
})

onUnmounted(() => {
  document.body.style.overflow = ''
})
</script>

<style scoped>
.edit-card-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.edit-card {
  width: 480px;
  max-height: 80vh;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部按钮栏 */
.edit-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
}

.header-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  background: transparent;
}

.header-button:hover {
  transform: translateY(-1px);
}

.close-button {
  background: #f5f5f5;
  color: #666;
  font-size: 18px;
  font-weight: bold;
  padding: 6px 10px;
}

.close-button:hover {
  background: #e0e0e0;
  color: #333;
}

.delete-button {
  color: #d32f2f;
  background: rgba(211, 47, 47, 0.1);
}

.delete-button:hover {
  background: rgba(211, 47, 47, 0.2);
}

.button-icon {
  line-height: 1;
  font-size: 16px;
}

.button-text {
  font-size: 14px;
}

/* 内容区域 */
.edit-card-content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.edit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.date-range-row {
  position: relative;
}

.row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 18px;
  color: #409eff;
  background: #f0f7ff;
}

/* 输入框样式 - 移除默认的内边距 */
.title-input,
.location-input,
.note-input {
  flex: 1;
}

/* 深度选择器修改 Element Plus 输入框的内边距 */
.title-input :deep(.el-input__wrapper),
.location-input :deep(.el-input__wrapper),
.note-input :deep(.el-input__wrapper) {
  padding-left: 8px;
  padding-right: 8px;
  box-shadow: 0 0 0 1px #e0e0e0 inset;
  border-radius: 6px;
}

.title-input :deep(.el-input__wrapper:hover),
.location-input :deep(.el-input__wrapper:hover),
.note-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

.title-input :deep(.el-input__wrapper.is-focus),
.location-input :deep(.el-input__wrapper.is-focus),
.note-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}

.title-input :deep(.el-input__inner) {
  font-size: 16px;
  font-weight: 600;
  border: none;
  box-shadow: none;
  padding: 0;
}

.location-input :deep(.el-input__inner),
.note-input :deep(.el-input__inner) {
  border: none;
  box-shadow: none;
  padding: 0;
}

/* 日期范围样式 */
.date-range-content {
  flex: 1;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.display-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-range-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.edit-date-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
}

.edit-date-button:hover {
  background: #f5f5f5;
}

/* 编辑内容样式 */
.edit-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.date-inputs-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.date-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.date-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.date-value {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.fixed-date {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #e0e0e0;
}

.editable-date {
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.editable-date:hover {
  background: #f8f9fa;
  border-color: #409eff;
}

/* 全天行样式 */
.all-day-row {
  display: flex;
  align-items: center;
}

.all-day-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* 时间输入行样式 */
.time-inputs-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.time-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-input-group label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.time-input-wrapper {
  position: relative;
}

.time-input {
  width: 100%;
}

.time-input :deep(.el-input__wrapper) {
  padding-left: 8px;
  padding-right: 8px;
}

.time-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.time-dropdown option {
  padding: 8px 12px;
  font-size: 14px;
}

.time-dropdown option:hover {
  background: #f5f5f5;
}

/* 日期范围操作按钮 */
.date-range-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.confirm-btn,
.cancel-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-btn:hover {
  transform: translateY(-1px);
}

/* 重复设置样式 */
.repeat-section {
  flex: 1;
  display: flex;
  align-items: center;
}

.repeat-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* 底部按钮 */
.edit-card-footer {
  padding: 20px 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.footer-right {
  display: flex;
  gap: 12px;
}

.save-button,
.cancel-button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.save-button:hover {
  transform: translateY(-1px);
}

.cancel-button:hover {
  background: #f5f5f5;
}

/* DatePicker 容器样式 */
.date-picker-container {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2001;
  margin-top: 4px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .edit-card {
    width: 90vw;
    margin: 20px;
  }
  
  .date-inputs-row {
    flex-direction: column;
  }
  
  .edit-card-footer {
    flex-direction: column;
    gap: 16px;
  }
  
  .footer-right {
    width: 100%;
    justify-content: space-between;
  }
}
</style>